<template>
  <div class="content-div">
    <div style="text-align:center;">
      <van-icon name="star-o" color="#1989fa" /><van-icon name="star-o" color="#1989fa" />
      <span>写下真实感受，帮助千万用户决策</span>
      <van-icon name="star-o" color="#1989fa" /><van-icon name="star-o" color="#1989fa" />
    </div>
    <div class="card-div mt12 mb8">
      <div class="title-div mb20">陪诊师</div>
      <div>
        <van-row>
          <van-col class="mt5" offset="1" span="4">
            <img :src="medicalPhysician.head_sculpture" class="img-div" alt="">
          </van-col>
          <van-col span="18">
            <div>{{medicalPhysician.name}}</div>
            <div class="mt5"><van-tag class="mr5" size="medium" type="primary">陪诊机构</van-tag><van-tag size="medium" type="primary">机构认证</van-tag></div>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="card-div">
      <van-field
        label-width="80"
        :border="false"
        :colon="true"
        label="服务类型"
        :value="orderInfo.give_service_type"
        readonly
      />
      <van-field
        label-width="80"
        :border="false"
        :colon="true"
        label="订单金额"
        :value="`¥${orderInfo.payable_amount}`"
        readonly
      />
      <van-cell label-width="60" :border="false" :colon="true" title="服务评分">
        <template #right-icon>
          <van-rate allow-half v-model="star_value" @change="onChange" style="width:74%;" />
        </template>
      </van-cell>
      <van-cell label-width="60" :border="false" :colon="true" readonly>
        <template #title>
          <div style="width:70px;">猜你想说</div>
        </template>
        <template #right-icon>
          <div>
            <van-tag class="mr5" size="medium" round @click="clickTag(item, index)" v-for="(item, index) in  tagArr" v-bind:key="index" type="primary" style="min-width:50px;text-align:center;display: inline-block;">{{item.value}}</van-tag>
          </div>
        </template>
      </van-cell>
      <div>
      </div>
      <div class="pj-div">
        <van-field v-model="order_evaluation" rows="5" autosize type="textarea" placeholder="请对陪诊师进行评价" show-word-limit style="padding:10px;"/>
      </div>
    </div>
    <div class="gn-btn-box">
      <div class="gn-btn" @click="saveEvaluate()">提交评价</div>
    </div>
  </div>
</template>
<script>
import { getOrderDetails, insertOrderEvaluation } from '@/api/medical.js'
import { Toast } from 'vant'
export default {
  name: 'nursingEvaluation',
  data () {
    return {
      params: {},
      orderInfo: {},
      star_value: null,
      tagArr: [
        { value: '专业', checked: false },
        { value: '细心认真', checked: false },
        { value: '有责任心', checked: false },
        { value: '善解人意', checked: false }
      ],
      order_evaluation_arr: [],
      order_evaluation: '',
      medicalPhysician: {}
    }
  },
  computed: {
    member_id () {
      return this.$store.state.user.severUserInfo.member_id
    }
  },
  methods: {
    saveEvaluate () { // 提交评价
      console.log(this.order_evaluation, '评价内容')
      if (!this.params.fraction) {
        Toast.fail('请选择星级！')
        return
      }
      if (!this.order_evaluation) {
        Toast.fail('请填写评价！')
        return
      }
      this.params = {
        order_goods_id: this.$route.query.order_goods_id,
        state: '8',
        accompanying_physician_id: this.orderInfo.accompanying_physician_id,
        visitor_id: this.orderInfo.visitor_id,
        member_id: this.member_id,
        order_evaluation: this.order_evaluation,
        fraction: this.params.fraction
      }
      insertOrderEvaluation(this.params).then(res => {
        if (res.data.errcode === 0) {
          Toast.success('评价成功')
          this.$router.push({
            name: 'order'
          })
          return
        }
        Toast.fail(res.data.errmsg)
      })
    },
    getOrderData (order_goods_id) {
      getOrderDetails({ order_goods_id: order_goods_id }).then(res => {
        if (res.data.errcode === 0) {
          this.medicalPhysician = res.data.data.medicalAccompanyingPhysician
          this.orderInfo = res.data.data.orderDetails
          this.orderInfo.payable_amount = res.data.data.orderDetails.payable_amount.toFixed(2)
          console.log(this.orderInfo.order_number)
          // this.waiterInfo = res.data.data.medicalAccompanyingPhysician
        }
      })
    },
    clickTag (item, index) {
      this.tagArr[index].checked = !this.tagArr[index].checked
      if (this.tagArr[index].checked === true) {
        if (this.order_evaluation_arr.indexOf(item.value) === -1) { // 没出现
          this.order_evaluation_arr.push(this.tagArr[index].value)
        }
      }
      this.order_evaluation = this.order_evaluation_arr.join(',')
      console.log(this.order_evaluation)
    },
    onChange (value) {
      console.log(value)
      this.params.fraction = this.getScore(value)
      console.log(this.params.fraction)
    },
    getScore (value) {
      switch (value) {
        case 0.5:
          return '10'
        case 1:
          return '20'
        case 1.5:
          return '30'
        case 2:
          return '40'
        case 2.5:
          return '50'
        case 3:
          return '60'
        case 3.5:
          return '70'
        case 4:
          return '80'
        case 4.5:
          return '90'
        case 5:
          return '100'
        default:
          return ''
      }
    }
  },
  mounted () {
    this.getOrderData(this.$route.query.order_goods_id)
    console.log(this.$store.state.user.severUserInfo)
  }
}
</script>
<style scoped lang="less">
  .content-div {
    font-size: 12px;
    padding: 12px 8px;
    font-family: PingFangSC;
    background-color: #f2f3f7;
    min-height: calc(100% - 25px);
    .card-div {
      background-color: #ffffff;
      padding: 10px 10px 0px 10px;
      padding-top: 10px;
      padding-left: 10px;
      padding-bottom: 30px;
      height: auto;
      border-radius: 12px;
      .title-div {
        height: 17px;
        line-height: 17px;
        position: relative;
      }
      .title-div::before {
        position: absolute;
        left: -10px;
        width: 3px;
        height: 10px;
        background-color: #1989fa;
        top: 20%;
        content: ' ';
      }
      .img-div {
        width: 30px;
        height: 30px;
        border-radius: 50%;
      }
      .van-cell {
        padding: 0 0rem 0.4rem 0;
        color:#646566;
      }
      .pj-div {
        border: 1px dashed lightgray;
      }
    }
    .mt12 {
      margin-top: 12px;
    }
    .mt5 {
      margin-top:5px;
    }
    .mr5 {
      margin-right: 5px;
    }
    .mb20 {
      margin-bottom: 20px;
    }
    .mb8 {
      margin-bottom: 8px;
    }
    .flex {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .flex1 {
      display: flex;
      justify-content: flex-end;
      flex-direction: row;
      // align-items: center;
    }
    .row-center {
      justify-content: center;
    }
    .row-between {
      justify-content: space-between;
    }
  }
  .gn-btn-box{
      height: 58px;
      position: fixed;
      // bottom: 50px; // 不显示底部tabbar暂时注释掉，需要的时候解开即可
      bottom: 0px;
      left: 0;
      background-color: #FFFFFF;
      width: 100%;
      box-sizing: border-box;
      padding: 10px;
      box-shadow: 0 0 10px 0 #CCCCCC;
      .gn-btn{
        height: 38px;
        line-height: 38px;
        text-align: center;
        background-color: rgba(89,89,255,.07);
        color: #1989fa;
        border-radius: 6px;
        box-sizing: border-box;
        border: 1px solid #1989fa;
      }
    }
</style>
